<template>
	<view class="confirm">
		<!-- 收货地址，续租功能不展示 -->
		<view v-if="notXuzuFeature()" class="quanpinquanjiao address fxpad" @click="gotoAddress">
			<view class="left" v-if="address">
				<view class="item1">
					{{ address.realname }}
					{{ address.telephone }}
				</view>
				<view class="item2">
					{{ address.provinceStr }}{{ address.cityStr }}{{ address.areaStr
          }}{{ address.street }}
				</view>
			</view>
			<view v-else class="left2">
				<image style="width: 36rpx; height: 36rpx; margin-right: 10rpx" src="../../static/product/diz.png"
					mode="scaleToFill"></image>
				请填写收货地址
			</view>
			<image mode="scaleToFill" class="iocn" src="../../static/my/jiantou.png"></image>

			<image src="../../static/product/dw.png" mode="scaleToFill" class="bottom-backgroind"></image>
		</view>

		<!-- 商品描述 -->
		<view class="quanpinquanjiao product-wrapper">
			<image :src="productDescDetail.productImage" class="product-img" />
			<view class="desc">
				<view class="product-name">{{ productDescDetail.productName }}</view>
				<view class="sku">规格：{{ productDescDetail.specName }}</view>
				<view class="rent">
					<text class="text1">首期租金</text>
					<text class="text2">￥{{ orderPrices.firstPeriodsRentPrice }}</text>
				</view>
			</view>
		</view>

		<!-- 优惠券，续租功能不展示 -->
		<view v-if="notXuzuFeature()" class="coupon quanpinquanjiao fxpad">
			<view class="item1">优惠券</view>
			<view class="item2" @click="$refs.couponList.show()">
				<text class="text" v-if="!reduction">{{ orderCouponLength }}张可用</text>
				<text v-else class="text2">-{{ reduction }}</text>
				<image mode="scaleToFill" class="arrow" src="../../static/my/jiantou.png"></image>
			</view>
		</view>

		<!-- 增值服务 -->
		<view class="container quanpinquanjiao" v-if="services.length">
			<view v-for="(item, index) in services" :key="index" class="item fxpad">
				<view class="left">
					{{ item.shopAdditionalServices.name }}
					<image @click="getServicesData(item.shopAdditionalServices)" src="../../static/product/sm.png"
						mode="scaleToFill" class="sm"></image>
				</view>
				<view class="right">
					￥{{ item.shopAdditionalServices.price }}
					<image src="/static/orderList/inactive.png" :class="{
              checkIcon: true,
              hide:
                servicesId.findIndex(
                  (id) => id === item.shopAdditionalServices.id
                ) > -1,
            }" @click="addSrvicesId(item.shopAdditionalServices.id)" style="margin-left: 10rpx" />
					<image src="/static/orderList/active.png" @click="deleteSrvicesId(item.shopAdditionalServices.id)"
						style="margin-left: 10rpx" :class="{
              checkIcon: true,
              hide:
                servicesId.findIndex(
                  (id) => id === item.shopAdditionalServices.id
                ) === -1,
            }" />
				</view>
			</view>
		</view>

		<!-- 订单金额等一些数据的展示 -->
		<view class="container quanpinquanjiao">
			<view class="item fxpad" v-if="orderPrices.otherPeriodsPrice && notXuzuFeature()">
				<view class="left">剩余租金计划</view>
				<view class="right" @click="$refs.eachIssue.show()">
					￥{{ orderPrices.otherPeriodsPrice }}*{{ orderPrices.restPeriods }}期
					<image mode="scaleToFill" class="arrow" src="../../static/my/jiantou.png"></image>
				</view>
			</view>
			<view class="item fxpad" v-if="productDescDetail.isBuyOutSupported">
				<view class="left">到期买断价</view>
				<view class="right">￥{{ orderPrices.expireBuyOutPrice }}</view>
			</view>
			<view class="item fxpad">
				<view class="left">总租金</view>
				<view class="right">￥{{ orderPrices.totalRent }}</view>
			</view>
			<view v-if="notXuzuFeature()" class="item fxpad">
				<view class="left">运费</view>
				<view class="right">{{ freightType[productDescDetail.productFreightType] }}</view>
			</view>
			<view class="item fxpad">
				<view class="left">
					商品押金
					<text class="futit">凭芝麻信用最高可全免</text>
				</view>
				<view class="right">￥{{ orderPrices.depositAmount }}</view>
			</view>
		</view>
		<!-- 实名认证 -->
		<view class="authentication quanpinquanjiao fxpad" v-if="!loadingShiming && !hasCertification">
			<view>实名认证</view>
			<view class="item2" @click="$onTo('pages/certificates/certificates')">
				<text>请认证</text>
				<image mode="scaleToFill" class="arrow" src="../../static/my/jiantou.png"></image>
			</view>
		</view>
		<!-- 留言 -->
		<view class="message quanpinquanjiao">
			<input placeholder="买家留言" class="text-area" @input="getRemark" />
		</view>
		<!-- 协议 -->
		<view class="agreement">
			<image src="/static/orderList/active.png" :class="{
				
          checked: true,
          hide: !isChecked,
        }" mode="scaleToFill" @click="getChecked"></image>
			<image :class="{
          checked: true,
          hide: isChecked,
        }" src="/static/orderList/inactive.png" mode="scaleToFill" @click="getChecked"></image>
			<text @click="getChecked">我已阅读并同意签署
				<text class="xieyi" @click="seeLook()">
					"租赁服务协议以及相关"
				</text>
				<!-- <text class="xieyi" @click="seeXieyiHandler">《租赁服务协议》</text>
				<text class="xieyi" @click="seePrivacyXieyiHandler">《隐私协议》</text>
				<text class="xieyi " @click="seeAuthorization">《个人征信授权书》</text>
				<text class="xieyi " @click="seeUser">《用户授权协议》</text>
				<text class="xieyi " @click="seeContract">《融资租赁委托担保合同》</text> -->
			</text>
		</view>
		<!-- 底部支付 -->
		<view class="footer">
			<view class="left">
				实付金额:
				<view class="price-area">
					<view class="left">
						<text class="m">¥</text>
						<text class="l">{{
              getPartMoney(true, orderPrices.firstPeriodsPrice)
            }}</text>
						<text class="d">.</text>
						<text class="r">{{
              getPartMoney(false, orderPrices.firstPeriodsPrice)
            }}</text>
					</view>
				</view>
			</view>
			<view class="right" @click="onOk"> 信用授权支付 </view>
		</view>
		<!-- 增值服务详情 -->
		<wyb-popup ref="serviceDetails" type="bottom" width="500" radius="6" :showCloseIcon="true"
			:title="serviceDetailsTitle" bgColor="rgba(247, 248, 251, 1)">
			<view class="servicesContent">{{ serviceDetailsContent }}</view>
		</wyb-popup>
		<!--  -->
		<wyb-popup ref="eachIssue" type="bottom" width="500" radius="6" :showCloseIcon="true" title="租金支付计划"
			bgColor="rgba(247, 248, 251, 1)">
			<view class="eachIssueTitle">可提前主动支付</view>
			<view class="eachIssue">
				<view class="item" v-for="(item, index) in orderPrices.orderByStagesDtoList" :key="index">
					<view class="mark" v-if="index === 0">今日支付</view>
					<view class="text1">第{{ item.currentPeriods }}期</view>
					<view class="text2">￥{{ item.currentPeriodsRent }}</view>
					<view class="text3">{{ item.statementDate }}</view>
				</view>
			</view>
		</wyb-popup>
		<!-- 可用优惠券 -->
		<wyb-popup ref="couponList" type="bottom" width="500" radius="6" :showCloseIcon="true" title="可用优惠券"
			bgColor="rgba(247, 248, 251, 1)">
			<view class="coupons">
				<view class="coupon-item" v-for="(item, index) in orderCouponList" :key="index"
					@click="onIsCheck(index, item)">
					<view class="item-left">
						<view>
							<view class="title">
								<text style="font-size: 24rpx">￥</text>
								{{ item.discountAmount }}
							</view>
						</view>
						<view class="item-content">
							<view class="title">
								满{{ item.minAmount }}减{{ item.discountAmount }}
							</view>
							<view class="fu">{{ item.endTime }}到期</view>
						</view>
					</view>
					<view class="item-right">
						<image src="/static/orderList/inactive.png" :class="{
                checkIcon: true,
                hide: item.check,
              }" />
						<image src="/static/orderList/active.png" :class="{
                checkIcon: true,
                hide: !item.check,
              }" />
					</view>
				</view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
	import {
		getZWZUserDetail,
		returnChannelId,
		getAdPubCode
	} from "@/utils/index.js"
	import {
		tradePay,
		startAPVerify
	} from "@/utils/platform.js"
	import wybPopup from "@/components/wyb-popup/wyb-popup.vue"

	export default {
		data() {
			return {
				yueGong: '', //月供
				duration: 1, //	租用天数
				skuId: 42819, //商品规格ID
				orderCouponLength: 0, //优惠券多少条
				orderCouponList: [], //优惠券列表
				reduction: 0, //优惠券减免
				services: [], //增值服务列表
				servicesId: [], //增值服务列表id
				serviceDetailsTitle: "", //增值服务标题
				serviceDetailsContent: "", //增值服务内容
				freightType: { //运费类型判断
					FREE: "商家包邮",
					PAY: "用户支付",
					SELF: "自提",
				},
				orderLocationAddress: {}, //地址信息
				antiCheatingLevel: "", //营销反作弊字段
				nsfLevel: "", //用户风险
				couponId: "", //优惠券code
				isChecked: false, //是否签署协议
				//需要重新渲染数据
				orderPrices: {}, //金额数据
				address: {}, //收货地址
				remark: "", //用户留言
				hasCertification: false, //是否实名认证过
				loadingShiming: true, // 正在加载实名认证信息
				isXuzu: false, // 判断是续租
				passPrice: '', //由商品页传来的手机每日偿还的价格
				productDescDetail: {}, // 商品描述对象
				xuzuGlobalData: {}, // 续租功能的hzsx/api/orderRelet/userOrderReletConfirm接口所返回的数据
			}
		},
		components: {
			wybPopup,
		},
		onLoad(e) {
			console.log(e, "e")
			this.passPrice = e.price
			this.isXuzu = e.isXuzu == "1" // 判断是否是续租功能
			this.duration = e.duration
			this.skuId = e.skuId
			this.onConfirm()
			this.getPreventCheatAndNsf()
			if (this.isXuzu) { // 表明是来自续租页面，那么此时进行一些数据的初始化相关工作
				this.xuzuDataInit()
			}
			this.onAuthCodeOrderService();
		},
		onShareAppMessage() {
			return {
				title: this.$getGlobalData("information").appTitle,
				desc: `来${this.$getGlobalData("information").appTitle}，租好物`,
				path: "pages/index/index",
			}
		},
		onShow() {
			let that = this
			this.address = this.$getGlobalData("address")
			setTimeout(function() {
				that.loadingShiming = true
				that
					.$request("/hzsx/userCertification/hasCertification", {}, "get", true, true)
					.then((res) => {
						const canxiadan = ["UN_UPLOAD", "FINISH"] // 前者表示未上传照片，后者表示已认证
						that.hasCertification = canxiadan.includes(res.data)
					})
					.finally(() => {
						that.loadingShiming = false
					})
			}, 300)
		},

		methods: {
			onAuthCodeOrderService() {
				const key = "authCodeOrderService";
				let expires = 3600 * 24 * 1 * 1000; // 过期时间 7天 毫秒


				const data = uni.getStorageSync(key)
				if (typeof data !== 'object' || (typeof data === 'object' && !data.expires)) {
					// 订单服务用户授权 https://opendocs.alipay.com/mini/024hj4?ref=api
					my.getAuthCode({
						// 订单服务授权：order_service。如需同时获取用户多项授权，可在 scopes 中传入多个 scope 值。
						scopes: ['order_service'],
						success: (res) => {
							// 订单服务授权成功
						},
						fail: (res) => {
							let data = 1;
							// 订单服务授权失败，根据自己的业务场景来进行错误处理
							uni.setStorageSync(key, {
								data,
								expires: +new Date() + expires
							});
						},
					});
				}
				const now = +new Date()
				if (now < data.expires) { //用当前时间和存储的时间对比
					return false;
				} else {
					// 已过期，移除缓存，返回空
					uni.removeStorageSync(key)

					// 订单服务用户授权 https://opendocs.alipay.com/mini/024hj4?ref=api
					my.getAuthCode({
						// 订单服务授权：order_service。如需同时获取用户多项授权，可在 scopes 中传入多个 scope 值。
						scopes: ['order_service'],
						success: (res) => {
							// 订单服务授权成功
						},
						fail: (res) => {
							let data = 1;
							// 订单服务授权失败，根据自己的业务场景来进行错误处理
							uni.setStorageSync(key, {
								data,
								expires: +new Date() + expires
							});
						},
					});

				}


			},
			//提交订单
			onConfirm() {
				if (this.isXuzu) return // 续租的话就不请求了
				this.$request(
					"hzsx/liteUserOrders/confirm", {
						skuId: this.skuId,
						duration: this.duration,
						uid: this.$getUid(),
						price: this.passPrice
					},
					"post"
				).then((res) => {
					this.productDescDetail = res.data
					this.orderCouponLength = res.data.orderCouponList.length
					this.orderCouponList = res.data.orderCouponList
					this.services = res.data.additionalServices
					this.servicesId = res.data.additionalServices.map(
						(item) => item.shopAdditionalServicesId
					)
					this.address = res.data.address
					this.orderPrices = res.data.orderPrices
					this.yueGong = res.data.orderPrices.otherPeriodsPrice
					// this.$setGlobalData("yueGong", res.data.orderPrices.otherPeriodsPrice)
					this.$setGlobalData("address", res.data.address)
				})
			},

			//选择优惠券
			onIsCheck(index, red) {
				let goodList = this.orderCouponList
				if (goodList[index]["check"]) {
					goodList[index]["check"] = false
					this.reduction = 0
					this.couponId = ""
					this.$refs.couponList.hide()
					this.geTrail()
				} else {
					let indexCheck = goodList.findIndex((item) => item.check === true)
					if (indexCheck !== -1) {
						goodList[indexCheck]["check"] = false
					}
					this.$refs.couponList.hide()
					this.reduction = red.discountAmount
					this.couponId = red.code
					goodList[index]["check"] = true
					this.geTrail()
				}
				this.orderCouponList = goodList
			},
			//取消增值服务
			deleteSrvicesId(id) {
				let _servicesId = this.servicesId
				this.servicesId = _servicesId.filter((item) => item !== id)
				this.geTrail()
			},
			//增加增值服务
			addSrvicesId(id) {
				let _servicesId = this.servicesId
				_servicesId.push(id)
				this.servicesId = _servicesId
				this.geTrail()
			},
			getServicesData(val) {
				this.serviceDetailsTitle = val.name
				this.serviceDetailsContent = val.content
				this.$refs.serviceDetails.show()
			},
			//获取营销反作弊用户数据和用户风险
			getPreventCheatAndNsf() {
				// #ifdef MP-ALIPAY

				//营销反作弊
				if (my.canIUse("ap.preventCheat")) {
					my.ap.preventCheat({
						pid: this.$getGlobalData("information").pid,
						appId: my.getAppIdSync().appId,
						bizContext: {
							service: "marketing",
							risk_type: "riskinfo_anticheat_common",
							pid: this.$getGlobalData("information").pid,
							mobile_no: getZWZUserDetail().telephone,
						},
						success: (e) => {
							let riskResultDesc = JSON.parse(e.riskResultDesc)
							let riskResultDescDate = Object.keys(riskResultDesc)
							this.antiCheatingLevel = riskResultDescDate[0]
						},
					})
				}

				//用户风险
				if (my.canIUse("ap.nsf")) {
					my.ap.nsf({
						pid: this.$getGlobalData("information").pid,
						appId: my.getAppIdSync().appId,
						bizContext: {
							risk_type: "riskinfo_nsf_common",
							pid: this.$getGlobalData("information").pid,
							user_id: getZWZUserDetail().thirdId,
							mobile_no: getZWZUserDetail().telephone,
							cert_no: "null",
							lbs: "null",
							sales_amount: "null",
						},
						success: (e) => {
							let riskResultDesc = JSON.parse(e.riskResultDesc)
							let riskResultDescDate = Object.keys(riskResultDesc)
							this.nsfLevel = riskResultDescDate[0]
						},
					})
				}
				// #endif
			},
			//获取地区信息
			gotoAddress() {
				my.getLocation({
					type: 2,
					success: (res) => {
						let _streetNumber = ""
						let _orderLocationAddress = res
						_orderLocationAddress.streetNumber =
							`${res.streetNumber.street}${res.streetNumber.number}`
						_orderLocationAddress.pois = ""
						this.orderLocationAddress = {
							..._orderLocationAddress
						}
						this.$onTo("pages/address/address")
					},
					fail: (res) => {
						this.$onTo("pages/address/address")
					},
				})
			},
			//切换isChecked
			getChecked() {
				this.isChecked = !this.isChecked
			},
			//价格试算
			geTrail() {
				this.$request(
					"/hzsx/liteUserOrders/trail", {
						skuId: this.skuId,
						duration: this.duration,
						uid: this.$getUid(),
						additionalServicesIds: this.servicesId,
						couponId: this.couponId,
						price: this.passPrice
					},
					"post"
				).then((res) => {
					this.orderPrices = res.data
				})
			},
			/**
			 * 获取金额的小数点前、后的数据
			 * @param {Boolean} isFront : 是否是前半部分
			 */
			getPartMoney(isFront, price) {
				const _price = price || ""
				if (!_price) return "-"
				const list = _price.toString().split(".")
				const result = isFront ? list[0] : list[1]
				return result || 0
			},

			//获取用户留言
			getRemark(e) {
				this.remark = e.detail.value
			},

			//提交支付
			onOk() {
				if (!this.isChecked) {
					uni.showToast({
						title: "请阅读左下方协议并同意",
					})
					return
				}
				if (!this.hasCertification) {
					uni.showToast({
						title: "请完成实名认证",
					})
					return
				}
				if (!this.isXuzu && (!this.address || !this.address.id)) { // 正常下单需校验地址；续租的话沿用老地址
					uni.showToast({
						title: "请填写收货地址"
					})
					return
				}

				const {
					url,
					data
				} = this.generateOrderSubmitUrlAndData()

				this.$request(
					url,
					data,
					"post"
				).then((res) => {
					if (res.data.freezeUrl)
						//用户支付api
						tradePay(res.data.freezeUrl).then((res) => {
							this.$eventEmitter.emit(
								"refreshMyPageConfigData") // 刷新我的页面的配置数据，使得我的订单上的气泡上的数字会显示相应的值
							if (res.resultCode === "9000") {
								this.$request(
									"hzsx/api/order/getFaceAuthCertifyUrl", {
										orderId: this.productDescDetail.orderId
									}, // 正常下单和续租都是这个订单ID
									"post"
								).then((res) => {
									//支付成功后人脸识别
									startAPVerify(res.data).then((res) => {
										if (res.resultStatus === "9000") {
											//同步人脸识别结果
											this.$request(
												"hzsx/api/components/faceAuthInitAsync", {
													certifyId: res.result.certifyId
												},
												"get",
												true
											)
											//跳商品详情页
											this.$onTo("pages/orderList/orderList", false,
												true)
										} else {
											this.$onTo("pages/orderList/orderList", false,
												true)
										}
									})
								})
							} else {
								this.$onTo("pages/orderList/orderList", false, true)
							}
						})
				})
			},

			/**
			 * 返回提交订单所对应的接口名以及数据
			 */
			generateOrderSubmitUrlAndData() {
				let url = ""
				let data
				if (this.isXuzu) { // 续租功能
					url = "hzsx/api/orderRelet/liteUserOrderReletSubmit"
					const xuzuDetail = this.xuzuGlobalData || {}
					// const services = xuzuDetail.additionalServicesDtoList || []
					// const serviceIds = services.map(obj => obj.id)
					data = {
						originalOrderId: xuzuDetail.originalOrderId,
						orderId: xuzuDetail.orderId,
						originalPrice: xuzuDetail.orderPricesDto?.skuPrice,
						price: xuzuDetail.orderPricesDto?.skuPrice,
						productId: xuzuDetail.detailDto?.productId,
						start: xuzuDetail.start,
						end: xuzuDetail.end,
						duration: xuzuDetail.duration,
						num: 1,
						skuId: xuzuDetail.detailDto?.skuId,
						monthRentAmount: xuzuDetail.orderPricesDto?.originalMonthRentPrice,
						deposit: xuzuDetail.orderPricesDto?.depositAmount,
						rentAmount: xuzuDetail.orderPricesDto?.rentPrice,
						installmentCount: xuzuDetail.orderPricesDto?.totalPeriods,
						additionalServicesIds: [],
						remark: this.remark,
						channelId: returnChannelId(),
						uid: this.$getUid(),
					}
				} else {
					url = "hzsx/liteUserOrders/submit"
					data = {
						price: this.passPrice,
						orderId: this.productDescDetail.orderId,
						addressId: this.address.id,
						nsfLevel: this.nsfLevel,
						antiCheatingLevel: this.antiCheatingLevel,
						skuId: this.skuId,
						duration: this.duration,
						couponId: this.couponId,
						additionalServicesIds: this.servicesId,
						uid: this.$getUid(),
						remark: this.remark,
						orderLocationAddress: this.orderLocationAddress,
						adPubCode: getAdPubCode(),
					}
				}

				return {
					url,
					data
				}
			},

			/**
			 * 如果是来自续租的话，那么对数据进行初始化
			 */
			xuzuDataInit() {
				const globalSavedData = this.$getGlobalData("xuzuProductDetail") || {}
				const productDescObj = globalSavedData?.detailDto || {} // 商品的描述对象
				const orderPricesDto = globalSavedData?.orderPricesDto || {} // 订单的描述对象
				// const additionalServicesDtoList = globalSavedData?.additionalServicesDtoList || [] // 增值服务数据，还需确定一下是否可原数据一样

				productDescObj.productImage = productDescObj.mainImageUrl // 图片替换
				productDescObj.specName = productDescObj.skuTitle // 商品规格字段替换
				productDescObj.isBuyOutSupported = globalSavedData.isBuyOutSupported // 是否支持买断替换
				productDescObj.orderId = globalSavedData?.orderId // 新订单的ID
				productDescObj.productFreightType = productDescObj.returnfreightType // 归还规则

				orderPricesDto.expireBuyOutPrice = globalSavedData.expireBuyOutPrice // 买断价

				this.productDescDetail = productDescObj
				this.orderPrices = orderPricesDto
				this.xuzuGlobalData = globalSavedData
				// this.services = additionalServicesDtoList
			},

			/**
			 * 除开续租模块外都进行显示
			 */
			notXuzuFeature() {
				if (this.isXuzu) return false
				return true
			},
			// 去看协议及相关
			seeLook() {
				this.$setGlobalData("specForXieyi", this.productDescDetail.specName)
				this.$setGlobalData("zujiPlanForXieyi", this?.orderPrices?.orderByStagesDtoList) // 租金计划
				this.$setGlobalData("zongzujinForXieyi", this.orderPrices?.totalRent)
				this.$setGlobalData("xiaoshoujiaForXieyi", this.productDescDetail?.salePrice) // 存储销售价
				this.$setGlobalData("daoqimaiduanjiaForXieyi", this.productDescDetail?.expireBuyOutPrice || 0) // 到期买断价
				uni.navigateTo({
					url: '/pages/agreementRelated/agreementRelated'
				})
			},

			/**
			 * 查看协议内容
			 */
			// seeXieyiHandler() {
			// 	const pid = this.$getGlobalData("productIdForXieyi")
			// 	this.$setGlobalData("specForXieyi", this.productDescDetail.specName)
			// 	this.$setGlobalData("zujiPlanForXieyi", this?.orderPrices?.orderByStagesDtoList) // 租金计划
			// 	this.$setGlobalData("zongzujinForXieyi", this.orderPrices?.totalRent)
			// 	this.$setGlobalData("xiaoshoujiaForXieyi", this.productDescDetail?.salePrice) // 存储销售价
			// 	this.$setGlobalData("daoqimaiduanjiaForXieyi", this.productDescDetail?.expireBuyOutPrice || 0) // 到期买断价
			// 	this.$onTo(`/pages/xieyi/xieyi?productId=${pid}`)
			// },
			// seePrivacyXieyiHandler() {
			// 	this.$onTo(`/pages/xieyi/privacy`)
			// },
			// // 查看个人征信授权书
			// seeAuthorization() {
			// 	const pid = this.$getGlobalData("productIdForXieyi")
			// 	this.$onTo(`/pages/individualAuthorization/individualAuthorization?productId=${pid}`)
			// },
			// // 查看用户授权协议
			// seeUser() {
			// 	const pid = this.$getGlobalData("productIdForXieyi")
			// 	this.$onTo(`/pages/userAuthorization/userAuthorization?productId=${pid}`)
			// },
			// // 查看融资租赁委托担保合同
			// seeContract() {
			// 	this.$setGlobalData("specForXieyi", this.productDescDetail.specName)
			// 	this.$setGlobalData("zujiPlanForXieyi", this?.orderPrices?.orderByStagesDtoList) // 租金计划
			// 	this.$setGlobalData("zongzujinForXieyi", this.orderPrices?.totalRent)
			// 	this.$setGlobalData("xiaoshoujiaForXieyi", this.productDescDetail?.salePrice) // 存储销售价
			// 	this.$setGlobalData("daoqimaiduanjiaForXieyi", this.productDescDetail?.expireBuyOutPrice || 0) // 到期买断价
			// 	const pid = this.$getGlobalData("productIdForXieyi")
			// 	this.$onTo(`/pages/contract/contract?productId=${pid}&yueGong=${this.yueGong}`)
			// },
		},
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 150rpx;
	}

	.confirm {
		padding-top: 20rpx;

		.address {
			background: #ffffff;
			margin: 20rpx 0;
			margin-top: 0;
			height: 120rpx;
			position: relative;

			.iocn {
				width: 12rpx;
				height: 18rpx;
			}

			.left2 {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.item1 {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.item2 {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				margin-top: 19rpx;
			}

			.bottom-backgroind {
				position: absolute;
				height: 8rpx;
				width: 100%;
				bottom: 0;
				left: 0px;
			}
		}

		.fxpad {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.product-wrapper {
			background: #fff;
			padding: 30rpx;
			display: flex;
			align-items: center;

			margin-bottom: 20rpx;

			.product-img {
				width: 216rpx;
				height: 216rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.desc {
				overflow: hidden;
				width: 484rpx;

				.product-name {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 20rpx;
				}

				.sku {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;
					height: 60rpx;
				}

				.rent {
					display: flex;
					justify-content: space-between;
					margin-top: 24rpx;

					.text1 {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.text2 {
						font-size: 24rpx;
						font-weight: 400;
						color: #e52021;
					}
				}
			}
		}

		.coupon {
			background: #ffffff;

			.item1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.item2 {
				.text {
					font-size: 22rpx;
					font-weight: 400;
					color: #e52021;
					background-color: #fbedeb;
					border-radius: 5rpx;
					padding: 2rpx 8rpx;
				}

				.text2 {
					font-size: 24rpx;
					font-weight: 400;
					color: #e52021;
				}
			}
		}

		.arrow {
			width: 10rpx;
			height: 16rpx;
			margin-left: 12rpx;
		}

		.container {
			background: #fff;
			margin-top: 20rpx;

			.item {
				.left {
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
					display: flex;
					align-items: center;

					.sm {
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}

					.futit {
						font-size: 20rpx;
						font-weight: 400;
						color: #fff2c5;
						background: #1f2129;
						border-radius: 15rpx;
						padding: 1px 12rpx;
						margin-left: 10rpx;
					}
				}

				.right {
					font-size: 26rpx;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;

					.checkIcon {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}

		.servicesContent {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			text-align: center;
			padding: 55rpx 0;
			min-height: 120rpx;
		}

		.coupons {
			max-height: 750rpx;
			overflow: auto;
			padding-bottom: 30rpx;

			.coupon-item {
				width: 650rpx;
				height: 170rpx;
				background: #ffffff;
				border-radius: 10rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item-left {
					text-align: center;
					display: flex;

					.title {
						font-size: 62rpx;
						font-weight: 500;
						color: #ff4a26;
					}
				}

				.item-content {
					margin-left: 47rpx;
					text-align: left;

					.title {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						margin-bottom: 10rpx;
					}

					.fu {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						display: flex;
						align-items: center;
					}
				}

				.item-right {
					.checkIcon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		.hide {
			display: none;
		}

		.eachIssueTitle {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-top: 10rpx;
			margin-bottom: 30rpx;
			text-align: center;
		}

		.eachIssue {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			padding: 0 30rpx;
			padding-bottom: 60rpx;

			.item {
				width: 334rpx;
				height: 129rpx;
				background: #ffffff;
				border-radius: 10rpx;
				margin-bottom: 22rpx;
				text-align: center;
				position: relative;

				.mark {
					width: 93rpx;
					height: 28rpx;
					@include global-background-color();
					border-radius: 10rpx 0px 20rpx 0px;
					text-align: center;
					line-height: 28rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
					position: absolute;
					top: 0;
					left: 0;
				}

				.text1 {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;

					line-height: 33rpx;
					margin-top: 10rpx;
				}

				.text2 {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}

				.text3 {
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;
				}
			}
		}

		.message {
			box-sizing: border-box;
			margin-bottom: 30rpx;
			background: #fff;
			padding: 20rpx 30rpx;
			margin-top: 20rpx;

			.text-area {
				box-sizing: border-box;
				//   min-height: 180rpx;
				width: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				// padding: 20rpx 0;
			}
		}

		.agreement {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;

			.checked {
				border: 10rpx solid transparent;
				width: 28rpx;
				height: 28rpx;
				margin-left: 20rpx;
			}
		}

		.authentication {
			background: #fff;
			margin-top: 20rpx;

			.item1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.item2 {
				font-size: 26rpx;
				font-weight: 400;
				color: #e52021;
			}
		}

		.footer {
			width: 750rpx;
			height: 98rpx;
			background: #ffffff;
			padding-left: 30rpx;
			position: fixed;
			bottom: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: flex-end;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;

				.price-area {
					.left {
						color: #e52021;
						margin-left: 6rpx;

						.m {
							font-size: 28rpx;
							margin-right: 6rpx;
							font-weight: 500;
						}

						.l {
							font-size: 38rpx;
							font-weight: 500;
						}

						.d {
							font-size: 28rpx;
						}

						.r {
							font-size: 28rpx;
							font-weight: 500;
						}
					}
				}
			}

			.right {
				width: 328rpx;
				height: 98rpx;
				@include global-background-color();
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 98rpx;
				text-align: center;
			}
		}

		.xieyi {
			margin-top: 0rpx;
			color: #586E98;
		}
	}
</style>
